import { Component } from 'react';
import React from 'react';
import { connect } from 'umi';
import HighPerformTable from '@/components/HighPerformTable';
import APIS from '@/apis';
import { Button, Divider, Modal, Select } from 'antd';

class TeacherManagerPage extends Component<any, any> {
  actionRef: any;

  constructor(props: any) {
    super(props);
    this.state = {
      selectData: undefined,
      modalVisible: false,
      // userId:-1,
      record: undefined,
      roles: [],
    }

  }

  handleRole() {

  }

  handleDelete(data: any) {
    return APIS.OrgsAPI.DeleteTeacher({ id: data}).then(res=>this.actionRef.reload())
      .catch(() => {
        return Promise.resolve(false);
      });
  }

  componentDidMount() {
    const { Option } = Select
    APIS.UserAPI.GetRoleList({ current: 1, pageSize: 9999 }).then((res) => {
      const temp = [];
      res.data.map((item, index) => {
        if (item.roleId !== 10000) {
          temp.push(<Option key={item.roleId} value={item.roleId}>{item.name}</Option>)
        }
      })
      this.setState({ selectData: temp })
    })
  }
  requestGetData(
    params: {
      pageSize?: number;
      current?: number;
    },
    sorter: {
      [key: string]: 'ascend' | 'descend';
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) {
    return APIS.OrgsAPI.GetTeacherList({ ...params, sorter, filter });
  }
  clomns: any = [
    {
      title: '姓名',
      dataIndex: 'name',
      rules: [
        {
          required: true,
          message: '规则名称为必填项',
        },
      ],
    },
    {
      title: '编号',
      dataIndex: 'studentId',
    },
    {
      title: '职称',
      dataIndex: 'titles',

    },
    {
      title: '详细介绍',
      dataIndex: 'description',
      render: (item: any, data: any) => {
        return <a onClick={() => Modal.info({ title: "详细信息", content: data.description })}>查看</a>
      },
      hideInForm: true,
    },
    {
      title: '审核',
      hideInForm: true,
      dataIndex: 'createdTime',
      valueType: 'datetime',

      render: (item: any, data: any) => {
        return <div>
          {
            data.state === 1 ? "已启用" :
              <div><Button type="primary" onClick={() => APIS.OrgsAPI.AcceptTeacherInfo(data).then(() => this.actionRef.reload())}>同意</Button>
                <Divider type="vertical"></Divider>
                <Button type="ghost" onClick={() => APIS.OrgsAPI.RefuseTeacherInfo(data).then(() => this.actionRef.reload())}>拒绝</Button></div>
          }
        </div>
      },
    },
  ];

  render() {
    const { selectData, record, roles } = this.state
    return (
      <div>

        <Modal
          title="分配角色"
          visible={this.state.modalVisible}
          onCancel={() => this.setState({ modalVisible: false, roles: undefined })}
          onOk={() => { APIS.OrgsAPI.ChangeTeacherRole({ id: record.userId, roles: roles }).then(() => { this.setState({ modalVisible: false, roles: undefined }) }) }}
        >
          <div style={{ marginBottom: "0.5rem" }}>姓名：{record?.name}</div>
          <Select
            // defaultValue="luck"
            mode={"multiple"}
            placeholder={'为用户分配角色'}
            style={{ width: "100%" }}
            value={this.state.roles}
            onChange={(value) => { this.setState({ roles: value }) }
            }
          >
            {selectData}
          </Select>
        </Modal>

        <HighPerformTable<any>
          ref={(ref) => (this.actionRef = ref)}
          columns={this.clomns}
          additionOptions={[{
            title: "权限", onClick: (data) => {
              APIS.OrgsAPI.GetTeacherRole({ id: data.userId }).then(res=>this.setState({roles:res,modalVisible:true,record:data}))

            }
          }
          // , {
          //   title: "删除", onClick: (data) => {
          //     APIS.OrgsAPI.DeleteTeacher({ id: data.id }).then(res=>this.actionRef.reload())
          //   }
          // }
        ]}
          requestGetData={this.requestGetData.bind(this)}
          handleDelete={this.handleDelete.bind(this)}
        />
      </div>
    );
  }
}

export default connect()(TeacherManagerPage);
